<template>
    <div class="gray">
        <search></search>
        <h2>我的收藏</h2>
        <ul class="bian">
            <li v-for="item in list" :key="item.id" @click="infoRoute(item.id)">
                <img :src="item.list_pic_url" width="165" height="165">
                <p>{{item.name}}</p>
                <p>￥{{item.retail_price}}</p>
            </li>
        </ul>
                   
    </div>
</template>

<script>
import { listAction } from '@/api/home/index';
import search from "@/components/search"
export default {
    data() {
        return {
            list:[]
        };
    },
    methods: {
        init(){
            listAction({
                openId:localStorage.getItem("openId")
            }).then(res=>{
                console.log(res);
                this.list = res.data.collectGoodsList
            })
        },
        infoRoute(id){
            this.$router.push({path:"/home/info",query:{ids:id}})
        },
    },
    created() {
        this.init();
    },
    computed: {

    },
    mounted() {
        
    },
    components:{
        search
    }
};
</script>

<style scoped lang="scss">
    .gray{
        background-color: rgb(244,244,244);
    }
    h2{
        margin: 0;
        padding: 10px 0;
       background-color: #fff;
    }
    .bian{
        display: flex;
        justify-content: space-between;
        flex-wrap:wrap ;
        margin-top:2px;
        li{
            width: 49.5%;
            background-color: #fff;
            margin-bottom: 1%;
            padding-bottom:5px;
            p{
                margin-bottom: .06667rem;
                text-align: left;
                text-indent: 1em;
            }
            p:last-child{
                color: #9c3232;
            }
        }
    }
   
</style>
